<template>
  <el-container>
    <el-header>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{title[0]}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{title[1]}}</el-breadcrumb-item>
      </el-breadcrumb>
      <h3>{{title[1]}}</h3>

    </el-header>
    <el-container>

      <el-main>
        <el-container>

          <div>
            <el-form :inline="true"
                     :model="formInline"
                     class="user-search">
              <el-form-item label="考试时间">
                <div class="block">
                  <span class="demonstration"></span>
                  <el-date-picker v-model="formInline.startTime"
                                  type="datetime"
                                  placeholder="选择日期时间">

                  </el-date-picker>
                  -
                  <el-date-picker v-model="formInline.endTime"
                                  type="datetime"
                                  placeholder="选择日期时间">
                  </el-date-picker>
                </div>
              </el-form-item>
              <!-- <el-form-item label="考试期次：">
                <el-input size="large"
                          v-model="formInline.whichTest"
                          placeholder="请输入"
                          clearable></el-input>
              </el-form-item> -->
              <el-form-item label="考试名称：">
                <el-input size="large"
                          v-model="formInline.testName"
                          placeholder="请输入"
                          clearable></el-input>
              </el-form-item>

              <el-form-item>
                <el-button size="large"
                           type="primary"
                           icon="el-icon-search"
                           @click="search">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="mod-btnbox">
            <el-button size="small"
                       type="primary"
                       icon="el-icon-plus"
                       @click="addTest">新增考试</el-button>

            <el-button size="small"
                       type="primary"
                       icon="el-icon-delete-solid"
                       @click="delManyT"
                       plain>批量删除
            </el-button>
          </div>

          <el-main>
            <template>
              <el-table ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange"
                        height="450">
                <el-table-column type="selection"
                                 width="55">
                </el-table-column>
                <el-table-column align="center"
                                 sortable
                                 prop="test_id"
                                 label="考试编号"
                                 width="50">
                </el-table-column>
                <el-table-column prop="test_code"
                                 label="考试代码"
                                 align="center"
                                 width="150px">
                </el-table-column>
                <el-table-column prop="test_name"
                                 label="考试名称"
                                 align="center"
                                 width="150px">
                </el-table-column>

                <el-table-column label="考试开始时间"
                                 align="center"
                                 show-overflow-tooltip
                                 width="150px">
                  <template slot-scope="scope">{{ scope.row.test_startTime | dateFormat}}</template>
                </el-table-column>
                <el-table-column label="考试结束时间"
                                 align="center"
                                 show-overflow-tooltip
                                 width="150px">
                  <template slot-scope="scope">{{ scope.row.test_endTime | dateFormat}}</template>
                </el-table-column>
                <el-table-column prop="test_class"
                                 label="参加考试班级序号"
                                 align="center"
                                 show-overflow-tooltip
                                 width="100px">
                </el-table-column>
                <el-table-column prop="test_status"
                                 label="审批状态"
                                 align="center"
                                 width="50px"
                                 show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini"
                               plain
                               @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                    <el-button size="mini"
                               type="danger"
                               plain
                               @click="deleteT(scope.$index, scope.row)">删除</el-button>
                    <el-button size="mini"
                               type="primary"
                               plain
                               @click="showmore(scope.$index, scope.row)">详情</el-button>
                    <el-button size="mini"
                               type="primary"
                               plain
                               @click="changeStatus(scope.$index, scope.row)">修改审批</el-button>
                  </template>
                </el-table-column>
              </el-table>

            </template>
          </el-main>
          <el-footer>

            <Pagination v-bind:child-msg="pageparm"
                        @callFather="callFather"></Pagination>
          </el-footer>
        </el-container>
      </el-main>
    </el-container>
    <el-dialog :visible.sync="formVisible"
               width="70%">
      <el-descriptions title="考试详情"
                       direction="vertical"
                       :column="6"
                       border>
        <el-descriptions-item label="考试编号">{{destable.id}}</el-descriptions-item>
        <el-descriptions-item label="考试代码">{{destable.code}}</el-descriptions-item>
        <el-descriptions-item label="考试名称">{{destable.name}}</el-descriptions-item>
        <el-descriptions-item label="考试科目编号">{{destable.subject}}</el-descriptions-item>
        <el-descriptions-item label="出考老师编号">{{destable.teacher}}</el-descriptions-item>
        <el-descriptions-item label="参考班级序号">{{destable.classs}}</el-descriptions-item>
        <el-descriptions-item label="开始时间"
                              :span="3">
          {{destable.startTime | dateFormat}}</el-descriptions-item>
        <el-descriptions-item label="结束时间"
                              :span="3">
          {{destable.endTime | dateFormat}}</el-descriptions-item>
        <el-descriptions-item label="单选数量">{{destable.exclusive}}道</el-descriptions-item>
        <el-descriptions-item label="多选数量">{{destable.multiple}}道</el-descriptions-item>
        <el-descriptions-item label="阅读数量">{{destable.read}}道</el-descriptions-item>
        <el-descriptions-item label="答题时间">{{destable.doTime}}分钟</el-descriptions-item>
        <el-descriptions-item label="试卷编号">{{destable.paper}}</el-descriptions-item>
        <el-descriptions-item label="及格分数">{{destable.okScore}}%</el-descriptions-item>
        <el-descriptions-item label="考试说明">{{destable.des}}</el-descriptions-item>

      </el-descriptions>
    </el-dialog>
  </el-container>

</template>

<script>
// 导入组件
// import headerComponent from "./head.vue";
//导入方法
import { tList, addTest, testList, del, change } from '../../api/testMG'
//分页组件
import Pagination from '../../components/Pagination'
// 导出模块
export default {
  // 模块名字
  name: 'testList',
  // 模块数据
  data() {
    //数据
    return {
      filterText: '',
      data: [],
      tableData: [],
      multipleSelection: [],
      title: '',
      formVisible: false,
      destable: {
        id: '',
        code: '',
        name: '',
        subject: '',
        teacher: '',
        classs: '',
        startTime: '',
        endTime: '',
        exclusive: '',
        multiple: '',
        read: '',
        doTime: '',
        paper: '',
        okScore: '',
        des: '',
      },
      formInline: {
        page: 1,
        limit: 10,
        testName: '',
        startTime: '',
        endTime: '',
      },
      statusform: {
        id: '1',
        status: 'n',
      },
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
    }
  },
  // 注册组件
  components: {
    // headerComponent
    Pagination,
  },
  // 监听指定值，只有指定值变化，才会触发

  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    changeStatus(index, row) {
      this.statusform.id = row.test_id
      if (row.test_status == 'n') {
        this.statusform.status = 'y'
        console.log(this.statusform)
        change(this.statusform).then((res) => {
          if (res.data.code == 200) {
            alert('修改成功')
            this.getdata(this.formInline)
          }
        })
      } else {
        this.statusform.status = 'n'
        change(this.statusform).then((res) => {
          if (res.data.code == 200) {
            alert('修改成功')
            this.getdata(this.formInline)
          }
        })
      }
    },
    deleteT(index, row) {
      del(row.test_id).then((res) => {
        if (res.data.code == 200) {
          alert('删除成功')
          this.getdata(this.formInline)
        }
      })
    },
    showmore(index, row) {
      console.log(index, row)
      this.formVisible = true
      this.destable.id = row.test_id
      this.destable.code = row.test_code
      this.destable.name = row.test_name
      this.destable.subject = row.test_subject
      this.destable.teacher = row.test_teacher
      this.destable.classs = row.test_class
      this.destable.startTime = row.test_startTime
      this.destable.endTime = row.test_endTime
      this.destable.exclusive = row.test_exclusive
      this.destable.multiple = row.test_multiple
      this.destable.read = row.test_read
      this.destable.doTime = row.test_dotime
      this.destable.paper = row.test_paper
      this.destable.okScore = row.test_okscore
      this.destable.des = row.test_des
    },
    filterNode(value, data) {
      if (!value) return true
      return data.subject.indexOf(value) !== -1
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    addFun() {},
    submitFun() {},

    addTest() {
      alert('添加试题')
    },
    addManyT() {
      alert('批量添加')
    },
    delManyT() {
      alert('批量删除')
    },
    getdata(parameter) {
      ;(this.loading = true),
        /***
         * 调用接口，渲染题目列表
         */
        testList(parameter)
          .then((res) => {
            this.loading = false
            if (res.data.code != 200) {
              this.$message({
                type: 'info',
                message: res.msg,
              })
            } else {
              console.log(res.data)
              this.tableData = res.data.data.list
              //console.log(this.tableData)
              // 分页赋值
              this.pageparm.currentPage = this.formInline.page
              this.pageparm.pageSize = this.formInline.limit
              this.pageparm.total = res.data.data.total
            }
          })
          .catch((err) => {
            this.loading = false
            this.$message.error('获取题目列表失败，请稍后再试！')
          })
    },
    //列表操作
    handleEdit() {
      alert('修改')
    },

    // 搜索事件
    search() {
      this.getdata(this.formInline)
    },
  },
  // 创建前状态(里面是操作)
  beforeCreate() {},
  // 创建完毕状态(里面是操作)
  created() {
    // tList().then((res) => {
    //   this.data = res.data
    //   console.log(this.data)
    // }),
    ;(this.title = this.$route.name.split('/')), this.getdata(this.formInline)
  },
  // 挂载前状态(里面是操作)
  beforeMount() {},
  // 挂载结束状态(里面是操作)
  mounted() {},
  mounted() {},
  // 更新前状态(里面是操作)
  beforeUpdate() {},
  // 更新完成状态(里面是操作)
  updated() {},
  // 销毁前状态(里面是操作)
  beforeDestroy() {},
  // 销毁完成状态(里面是操作)
  destroyed() {},
}
</script>

// scoped 样式只在本组件使用
<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.user-search {
  margin-top: 20px;
}
</style>
